<template>
	<view class="add-pay-box" :style="'padding-top:'+(barHeight)+'px'">
		<NavBar>
			<template v-slot:center>
				<view class="nav_center">
					添加支付申请
				</view>
			</template>
			<template v-slot:left>
				<text class="cancel-add" @click="cancelAdd">取消</text>
			</template>
		</NavBar>
		<view class="add-form-box">
			<view class="form-item">
				<view class="title">项目</view>
				<view style="display: flex;align-items: center;" @click="loadModal(1)">
					<input class="uni-input" placeholder="项目必填" v-model="projectName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">合同</view>
				<view style="display: flex;align-items: center;" @click="loadModal(2)">
					<input class="uni-input" placeholder="合同必填" v-model="contractTitle" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">合同总额</view>
				<input class="uni-input" placeholder="合同总额必填" v-model="contractEntity.contractPrice" disabled />
			</view>
			<view class="form-item">
				<view class="title">款项</view>
				<input class="uni-input" placeholder="款项必填" v-model="payEntity.payment" @click="loadPayment" disabled />
			</view>
			<view class="form-item">
				<view class="title">比例</view>
				<input class="uni-input" placeholder="比例必填" v-model="payEntity.payRatio" disabled />
			</view>
			<view class="form-item" style="border-bottom: none;">
				<view class="title">金额</view>
				<input class="uni-input" placeholder="金额必填" v-model="payEntity.payMoney" disabled />
			</view>
			<button style="margin: 20rpx" type="primary" @click="savePay">
				保存
			</button>
		</view>
		<!-- 选择合同 -->
		<view class="bottom-modal-box">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in dataEntities" @click="loadModalValue(data)">
						{{data.title}}
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 选择款项 -->
		<view class="bottom-modal-box">
			<uni-popup ref="payment" background-color="#fff">
				<view class="popup-content">
					<view class="item" style="text-align: center;" v-for="data in paymentEntities"
						@click="loadPaymenValue(data)">
						{{data}}
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				barHeight: 0,
				payEntity: {
					payment: '',
					payRatio: '',
					payMoney: ''
				},
				dataEntities: [],
				type: 0,
				id: '', // 支付Id
				projectName: '', // 选中的项目名称
				contractTitle: '', // 选中的合同名称
				contractEntity: {}, // 选中的合同
				paymentEntities: [],
			}
		},
		onLoad(option) {
			this.id = option.id
			if (this.id) {
				this.querySingle()
			}
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45 + 10;
		},
		methods: {
			async querySingle(){
				let res = await post(api.PaySingle, {id: this.id})
				this.payEntity = res.data
				if (this.payEntity.projectId) {
					post(api.ProjectSingle, {id: this.payEntity.projectId}).then(res=>{
						this.projectName = res.data == null ? null : res.data.projectName
					})
				}
				if (this.payEntity.contractId) {
					post(api.ContractSingle, {id: this.payEntity.contractId}).then(res=>{
						this.contractTitle = res.data == null ? null : res.data.contractTitle
					})
				}
			},
			savePay() {
				if (this.payEntity.projectId == '' || this.payEntity.projectId == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '项目不能为空'
					})
				}
				if (this.payEntity.contractId == '' || this.payEntity.contractId == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '合同不能为空'
					})
				}
				if (this.payEntity.payment == '' || this.payEntity.payment == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '款项不能为空'
					})
				}
				let url = this.id ? api.UpdatePay : api.SavePay
				post(url, this.payEntity).then(res => {
					if (res.code == '000000') {
						uni.$emit('reloadPayList')
					} else{
						uni.showToast({
							icon: 'error',
							title: '提交失败'
						})
					}
				})
			},
			cancelAdd() {
				uni.$emit('reloadPayList')
			},
			// 打开加载页面
			loadModal(type) {
				this.type = type
				this.dataEntities = []
				if (type == 1) {
					this.queryProject(type)
				} else if (type == 2) {
					this.queryContract(type)
				}
				this.$refs.popup.open('bottom')
			},
			// 查询项目
			queryProject(type) {
				let that = this
				post(api.ProjectEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.projectName
						that.dataEntities.push(data)
					})
				})
			},
			// 查询合同
			queryContract(type) {
				let that = this
				post(api.GetContractEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.contractTitle
						data.contractPrice = item.contractPrice
						data.advancePayRatio = item.advancePayRatio
						data.progressPayRatio = item.progressPayRatio
						data.taskSendPayRatio = item.taskSendPayRatio
						data.retentionMoneyRatio = item.retentionMoneyRatio
						that.dataEntities.push(data)
					})
				})
			},
			// 点击弹框中的选项，返回给输入框
			loadModalValue(data) {
				if (this.type == 1) {
					this.payEntity.projectId = data.id
					this.projectName = data.title
				} else if (this.type == 2) {
					this.payEntity.contractId = data.id
					this.contractTitle = data.title
					this.contractEntity = data
					// 组装合同款项
					this.paymentEntities = []
					this.paymentEntities.push('预付款')
					this.paymentEntities.push('进度款')
					this.paymentEntities.push('提货款')
					this.paymentEntities.push('质保金')
				}
				this.$refs.popup.close()
			},
			// 加载支付款项
			loadPayment() {
				if (this.paymentEntities.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请先选择具体合同'
					})
				}
				this.$refs.payment.open('bottom')
			},
			// 选择具体款项，回显
			loadPaymenValue(data) {
				this.payEntity.payment = data
				this.payEntity.payRatio = ''
				this.payEntity.payMoney = ''
				if (data == '预付款') {
					this.payEntity.payRatio = this.contractEntity.advancePayRatio
				} else if (data == '进度款') {
					this.payEntity.payRatio = this.contractEntity.progressPayRatio
				} else if (data == '提货款') {
					this.payEntity.payRatio = this.contractEntity.taskSendPayRatio
				} else if (data == '质保金') {
					this.payEntity.payRatio = this.contractEntity.retentionMoneyRatio
				}
				// 计算金额
				if (this.payEntity.payRatio) {
					this.payEntity.payMoney = (Number(this.contractEntity.contractPrice) / Number(this.payEntity.payRatio))
						.toFixed(2)
				}
				this.$refs.payment.close()
			},
		}
	}
</script>

<style>
	@import '../../static/css/AddPay.css';
	@import '../../static/css/commons.css';
</style>
